<template>
  <!-- 历史版本 -->
  <div class="table_box" v-loading="loading">
    <el-table :data="historyVersions" ref="multipleTable" class="historyTable" style="width: 100%">
      <el-table-column prop="realName" label="文件名">
        <template #default="scope">
          <div class="realName_box">
            <el-tooltip effect="dark" :content="scope.$index == 0 ? fileDetailInfo.realName : scope.row.originalName" placement="top-start">
              <div class="title1">{{ scope.$index == 0 ? fileDetailInfo.realName : scope.row.originalName }}</div>
            </el-tooltip>

            <!-- <el-button  class="realName_box_right" :disabled="judgePermission('download')" @click.stop="downloadFileFunc(scope.row)"> -->
            <el-button class="realName_box_right" @click.stop="downloadFileFunc(scope.row)">
              <svg-icon icon-class="download" class="icon_size" />
            </el-button>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="editionName" label="版本">
        <template #default="scope">{{ scope.$index == 0 ? '当前' : scope.row.versionName }}</template>
      </el-table-column>

      <el-table-column label="更新人">
        <template #default="scope">
          <div class="peopleBox" v-if="scope.row.createByName || scope.row.createBy">
            <div class="people">
              <span>
                {{ scope.row.createByName ? scope.row.createByName.slice(-2) : '' }}
                <!-- {{ scope.row.createNickName ? scope.row.createNickName.slice(-2) : scope.row.createBy.slice(-2) }} -->
              </span>
            </div>
            {{ scope.row.createByName ? scope.row.createByName : '' }}
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="更新时间" width="150px"></el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import { ApiPergetFilesVersions } from '@/api/personDoc/personDocApi';
const props = defineProps({
  fileDetailInfo: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const multipleTable = ref();
const loading = ref(false);
const historyVersions = ref([]);
const tableRowArray = ref([]);
const parentObj = ref({
  id: '',
  libraryType: ''
});

const select = (selection, row) => {
  tableRowArray.value = [];
  multipleTable.value.clearSelection();

  if (selection.length == 0) return;

  multipleTable.value.toggleRowSelection(row, true);
  tableRowArray.value.push(row);
};

// 查询历史版本
const apiOnlineSelectFilesVersions = (row) => {
  parentObj.value = row;
  loading.value = true;
  let oParam = {
    moduleId: props.fileDetailInfo.id,
    type: props.fileDetailInfo.libraryType
  };

  ApiPergetFilesVersions(oParam)
    .then((res) => {
      loading.value = false;

      historyVersions.value = res.rows;
    })
    .catch((err) => {
      loading.value = false;
    });
};

/**权限控制 */
const judgePermission = (str) => {
  // console.log(str, '权限控制');
  //   if (this.pageType == 'enterprise') {
  //     return !this.$yuUtils.documentsPermissionFunc([str], this.enterpriseMyRoleList);
  //   } else if (this.pageType == 'team') {
  //     return !this.$yuUtils.documentsPermissionFunc([str], this.myTeamFIleRoleList);
  //   } else {
  //     return false;
  //   }
};

/**下载 */
const downloadFileFunc = (row) => {
  row.id = parentObj.value.id;
  proxy?.$download.downloadFile([parentObj.value.id], parentObj.value.libraryType);

  // proxy?.$download.HistorydownloadFile(parentObj.value.id, parentObj.value.libraryType, row.versionId); //历史下载版本(需要时更换为这个)
};

onMounted(() => {
  // console.log(props.fileDetailInfo, '传递数据');
});

defineExpose({
  //调用组件需要导出 v-model的变量
  apiOnlineSelectFilesVersions
});
</script>

<style scoped lang="scss">
// 文字几行隐藏
@mixin textOverflow($clamp) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $clamp; //元素几行显示
  -webkit-box-orient: vertical;
}
.table_box {
  :deep(th) {
    color: #666;
    font-weight: normal;
    font-size: 14px;
    height: 51px;
  }
  :deep(tr) {
    color: #333;
    height: 51px;
  }
  :deep(.el-table__body tr:hover .realName_box_right) {
    visibility: visible;
    border: none;
    // background: none;
  }
}
.peopleBox {
  display: flex;
  align-items: center;
  .people {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background-color: #56abfb;
    margin-right: 3px;
    span {
      display: inline-block;
      margin-top: 2px;
      transform: scale(0.9, 0.9);
    }
  }
}
.realName_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title1 {
    width: 85%;
    @include textOverflow(1);
  }
}
.realName_box_right {
  visibility: hidden;
  border: none;
  // background: none;
}
</style>
